<template>
  <div id="app">
    <div class="Radio">
      <RadioGroup direction="horizontal" v-model="currentUrl">
        <Radio name="0">线路一</Radio>
        <Radio name="1">线路二</Radio>
      </RadioGroup>
    </div>
    <div>{{ currentIndex }} / {{ imgArrs.length }}</div>
    <div>{{ currentText }}</div>
    <img class="currentImg" :src="currentImg" οnerrοr="javascript:this.src='./error.png'" />
    <!-- <img class="currentImg" onerror="" /> -->
    <!-- <img  src="https://gw1.alicdn.com/tfscom/tuitui/TB2vW5vrUR1BeNjy0FmXXb0wVXa_!!0-rate.jpg" onerror="./error.png" /> -->

    <div class="btns">
      <Button type="info" :disabled="prevDisabled" @click="previous"
        >上一个</Button
      >
      <Button type="primary" class="button" @click="next">下一个</Button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import { Image as VanImage } from "vant";
import { Button, RadioGroup, Radio, Toast } from "vant";
export default {
  name: "App",
  components: {
    Button,
    RadioGroup,
    Radio,
    // "van-image": VanImage,
    // 'lazy-load':Lazyload,
  },
  data() {
    return {
      imgArrs: [],
      textArrs: [],
      currentImg: "",
      currentText: "",
      currentIndex: "0",

      prevDisabled: true,

      currentUrl: "1",
      urls: [
        "https://api.66mz8.com/api/rand.tbimg.php?format=json",
        "https://api.vvhan.com/api/tao?type=json",
      ],
    };
  },
  watch: {
    currentIndex(val) {
      this.prevDisabled = +val < 2;
    },
  },
  async mounted() {
    await this._loadData(this.urls[this.currentUrl]);
  },
  methods: {
    async _loadData(url) {
      try {
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
        });
        const { data } = await axios.get(url);
        // console.log("arr", this.imgArrs);
        this.changeUrl(data);
        Toast.clear();
      } catch (error) {
        Toast.clear();
        Toast.fail("请切换线路重试");
      }
    },

    changeUrl(data) {
      switch (this.currentUrl) {
        case "0":
          this._setUrl0(data);

          break;
        case "1":
          this._setUrl1(data);
          break;

        default:
          this._setUrl1(data);
          break;
      }
      this.currentIndex = this.imgArrs.length;
      console.log("changeUrl", this.currentIndex);
    },

    _setUrl0(data) {
      this.imgArrs.push(data.pic_url);
      this.currentImg = data.pic_url;
    },
    _setUrl1(data) {
      this.imgArrs.push(data.pic);
      this.textArrs.push(data.title);
      this.currentImg = data.pic;
      this.currentText = data.title;
    },

    async next() {
      const index = +this.currentIndex;

      if (index === this.imgArrs.length) {
        console.log("next");
        await this._loadData(this.urls[this.currentUrl]);
      } else {
        this.currentImg = this.imgArrs[index];
        this.currentText = this.textArrs[index];
        this.currentIndex = index + 1;
      }
    },

    previous() {
      if (this.currentIndex < 2) {
        return;
      }
      const index = this.currentIndex - 2;
      this.currentImg = this.imgArrs[index];
      this.currentText = this.textArrs[index];
      this.currentIndex = this.currentIndex - 1;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.currentImg {
  width: 100%;
  height: 100%;
}
.Radio {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btns {
  width: 100%;
  position: fixed;
  bottom: 1rem;
  display: flex;
  justify-content: space-around;
}
</style>
